
// import { SearchBar } from 'antd-mobile';
import React from 'react';
import style from './style.module.scss';
import { setUrlParameter, useUrlParameter } from 'router/utils';
import CommodityListItem from 'components/CommodityListItem'
import lazy from 'router/utils/lazy';
import { server } from 'server';

const CommodityDetails = lazy(() => import('page/CommodityDetails'));

/** 商品欧洲 */
const useGoods = () => {

    const [list, setList] = React.useState<any[]>([])

    React.useEffect(() => {
        (async () => {
            const url = `/medicine/goods/query`;
            const ajax = await server.post(url, { pageNum: 1, pageSize: 100 }).end();
            if (ajax.err) return;

            try {
                setList(ajax.res.body.data.records)
            } catch (error) {
                setList([])
            }
        })()
    }, [])

    return {
        list
    }
}

export default () => {

    const [cid] = useUrlParameter('cid');

    const { list } = useGoods()

    return (
        <>
            <div className={style.body} style={{ display: cid && 'none' }} >
                {/* <SearchBar className={style.searchBar} placeholder="搜索产品" maxLength={8} /> */}
                <div className={style.listCont} >
                    <ul>
                        {list.map((e, i) => {
                            return (
                                <div key={i} className={style.item} >
                                    <CommodityListItem
                                        onClick={() => { setUrlParameter({ cid: e.id }) }}
                                        img={e.imageUrl}
                                        price={e.goodsPrice}
                                        title={e.goodsName}
                                    />
                                </div>
                            )
                        })}
                    </ul>
                </div>
            </div>
            {cid && <CommodityDetails />}
        </>
    )
}